<template>
  <div>
    <Card>
      <div slot="title">
        <Button @click="handleSelectAll()">全选</Button>
        <Button type="primary" @click="handleReview(1)">审核</Button>
        <Button type="warning" @click="handleReview(0)">取消审核</Button>
      </div>
      <Table ref="selection" @on-selection-change="handleSelected" @on-select-change :columns="listColumns" :data="listData" stripe></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  export default {
    name: "comments",
    data() {
      return {
        selectAll: false,
        ids: [],
        limit: 0,
        page: 0,
        current: 1,
        total: 100,
        listData: [],
        listColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: "演出",
            key: "title",
            width: 300,
            render: (h, params) => {
              return h("a", {
                attrs: {
                  href: `/#/content/${params.row.concertId}`,
                  target: '_blank'
                },
              }, params.row.title);
            }
          },
          {
            title: "用户",
            key: "nickname",
            width: 100
          },
          {
            title: "内容",
            key: "comment"
          },
          {
            title: "评分",
            key: "score",
            width: 60
          },
          {
            title: "状态",
            key: "status",
            width: 100,
            render: (h, params) => {
              let st_name = params.row.status ? '已审核':'未审核';
              return h('div', st_name);
            }
          },
          {
            title: "评论时间",
            key: "updatedOn",
            width: 170,
            render: (h, params) => {
              return h('div', new Date(params.row.createdOn * 1000).toLocaleString())
            }
          },
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h("Button", {
                    props: {
                      icon: "checkmark",
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.review(Object.assign([], params.row.id), 1);
                      }
                    }
                  }, "审核"),
                h("Poptip", {
                    props: {
                      confirm: true,
                      width: 200,
                      title: "您确认删除这条内容吗？"
                    },
                    on: {
                      'on-ok': () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  [h("Button", {
                    props: {
                      icon: "trash-a",
                      type: "error",
                      size: "small"
                    }
                  },"删除")]
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.limit = 10;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.mockListData(1);
      },
      handleSelectAll () {
        this.selectAll = !this.selectAll;
        this.$refs.selection.selectAll(this.selectAll);
      },
      mockListData(init) {
        this.$axios({
          method: 'get',
          url: '/api/comment',
          params: {
            page: this.page,
            limit: this.limit,
            init: init,
          }
        }).then((res) => {
          this.total = res.data.request.total;
          this.listData = res.data.result;
          this.$Notice.success({
            title: '保存成功!'
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '保存失败!'
          });
          console.log(error);
        });
      },
      review(ids, status) {
        this.$axios({
          method: 'post',
          url: '/api/comments',
          data: {
            ids: ids,
            status: status,
          }
        }).then(res => {
          this.$Notice.success({
            title: '操作成功!'
          });
          this.init();
        })
      },
      remove(id) {
        this.$axios({
          method: 'delete',
          url: `/api/comment/${id}`,
        }).then(res => {
          this.$Notice.success({
            title: '删除成功!'
          });
          this.init();
        }).catch(error => {
          this.$Notice.error({
            title: '删除失败!'
          });
          console.log(error);
        });
      },
      handleReview(status) {
        this.review(this.ids, status);
      },
      handleSelected(selection) {
        this.ids = [];
        selection.forEach(e => {
          this.ids.push(e.id);
        });
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData(1);
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>

</style>
